<h3 id="ctb" class="form-btn blue-text"><a href="javascript:;"><i class="el-edit"></i>我要留言 / 展开表单</a></h3>
<div class="form-zd form-in">
    <form action="{% url 'blog:get_comment' blog.id %}" method="post" class="comment-form">
        {% if messages %}
            <script>
                {% for msg in messages %}
                    alert('{{ msg.message }}');
                {% endfor %}
            </script>
        {% endif %}
        {% csrf_token %}
        <div class="vwrap">
            <div class="vheader item3">
                <input class="vlink vinput" name="name" placeholder="昵称" maxlength="25" required=""
                       id="id_name" type="text">
                <label for="id_name">{{ form.url.errors }}</label>
            </div>
            <div class="vheader item3">
                <input class="vlink vinput" name="email" placeholder="邮箱" maxlength="50"
                       id="id_email" type="email">
                <label for="id_email">{{ form.url.errors }}</label>
            </div>
            <div class="vheader item3">
                <input class="vlink vinput" name="url_input" placeholder="链接" maxlength="100"
                       id="id_url_input" type="url">
                <label for="id_url_input">{{ form.url.errors }}</label>
            </div>
            <div class="vedit">
                <textarea type="text" class="vediter vinput OwO-textarea" name="comment" placeholder="在这里输入吧..."
                          maxlength="500" required="" id="id_comment" cols="40" rows="10"></textarea>
                <label for="id_comment">{{ form.comment.errors }}</label>
                <div class="OwO" style="width: 90%"></div>
                {% if user.is_authenticated %}
                    <button class="btn vbtn" type="submit">发表</button>
                {% else %}
                    <button class="btn vbtn" type="button">
                        <a href="{% url 'blog:login' %}?next={{ request.path }}#ctb">登陆后发表</a>
                    </button>
                {% endif %}
            </div>
        </div>
    </form>
</div>

<script>
    const OwO_msg = new OwO({
        logo: 'OωO表情',
        container: document.getElementsByClassName('OwO')[0],
        target: document.getElementsByClassName('OwO-textarea')[0],
        api: '/static/OwO.json',
        position: 'down',
        width: '100%',
        maxHeight: '250px'
    });
</script>
